<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .grid-container {
        display: grid; /* 使用CSS Grid布局 */
        place-items: center; /* 水平和垂直居中 */
        height: 100vh; /* 使容器的高度等于视口的高度 */
        background-color: lightgray; /* 背景颜色方便查看居中效果 */
      }

      .centered-content {
        width: 400px; /* 设置内容宽度 */
        height: 200px; /* 设置内容高度 */
        text-align: center; /* 文本居中对齐 */
        font-size:18px;
        line-height:100px;
        background-color: lightblue; /* 背景颜色方便查看居中效果 */
        margin: 0 2px;
        border: 1px solid black;
      }
    </style>
</head>
<body>
<div class="grid-container">
  <div class="centered-content">与 Flexbox 类似，CSS Grid 对于动态内容和响应式设计非常有用，可以处理更复杂的布局。</div>
</div>

</body>
</html>